﻿function resize(options){
    this.elem=$("<div class='zoom'></div>");
	this.bigImg=$(options.bigImg); //大图容器
	this.midImg=$(options.midImg);
	this.smallImg=$(options.smallImg);
	this.midW=50;
	this.midH = 50;
	this.smallW=30;
	this.smallH=30;
	this.outerW="";
	this.outerH="";
	this.deltaX="";
	this.deltaY="";
	this.mask=[];//遮罩临时数组，降遮罩层DOM保存这里
	this.imgselect=[];
	this.zoomWidth=120;
	this.zoomHeight=120;
	this.bigH="";
	this.bigW = "";
	this.init();
}
resize.prototype = {
	init:function () {
		var _this = this;
		_this.elem.css("position", "absolute");
		for (var i = 0; i < 8; i++) {
			var _select = "<div class='imgareaselect-handle" + (i + 1) + "'></div>";
			_this.imgselect[i] = $(_select);
			_this.elem.append(_this.imgselect[i]);
		}

		$("body").append(_this.elem);
		for(var i=0;i<4;i++){
			_this.mask[i]=$("<div class='outerimg'></div>")
			$("body").append(_this.mask[i]);
		}
		$(window).bind("resize",function(){_this._resize(_this)});
		_this.elem.bind("mousedown",function(e){
			$("body").css("cursor", "move")
			_this.dragMove(e,_this)
		});
		_this.elem.bind("mouseup",function(){
			$(this).unbind("mousemove")
			$("body").css("cursor", "")
		});
		_this.elem.bind("mouseleave",function(){
			$(this).unbind("mousemove")
		})
		_this.elem.bind("mouseenter",function(){

		})
		//_this.refresh()

		_this.set(_this.imgselect[0], "leftUp");
		_this.set(_this.imgselect[1], "up");
		_this.set(_this.imgselect[2], "rightUp");
		_this.set(_this.imgselect[3], "right");
		_this.set(_this.imgselect[4], "rightDown");
		_this.set(_this.imgselect[5], "down");
		_this.set(_this.imgselect[6], "leftDown");
		_this.set(_this.imgselect[7], "left");
	},
	_resize:function(obj){
		var _this = obj;
		_this.mL = _this.bigImg.offset().left;
		_this.mT = _this.bigImg.offset().top;
		_this.mR = _this.mL + _this.bigImg.width();
		var _zoomX=_this.mL+_this.deltaX,
			_zoomY=_this.mT+_this.deltaY;
		_this.elem.css({
			"left":_zoomX,
			"top":_zoomY
		})
		_this.setMask();
	},
	dragMove:function(e,obj){
		var _this=obj;
		e.stopPropagation();
		e.preventDefault();
		var _startX = e.clientX,
			_startY = e.clientY,
			_posX= _this.elem.offset().left,
			_posY=_this.elem.offset().top,
			_delX=_startX- _posX,
			_delY=_startY-_posY;
		_this.elem.bind("mousemove",function(e){
			e.stopPropagation();
			e.preventDefault();
			var _zoomX=Math.round(e.clientX-_delX),
				_zoomY=Math.round(e.clientY-_delY);
			var _L=_this.mL+(_this.bigW-_this.rW );
			var _T=_this.mT+(_this.bigH-_this.rH );
			if(_zoomX<_this.mL){
				_zoomX=_this.mL;
			}else if(_zoomX>_L){
				_zoomX=_L;
			}
			if(_zoomY<_this.mT){
				_zoomY=_this.mT;
			}else if(_zoomY>_T){
				_zoomY=_T;
			}
			_this.deltaX=Math.round(_zoomX-_this.mL);
			_this.deltaY=Math.round(_zoomY-_this.mT);
			$(this).css({
				"left":_zoomX,
				"top":_zoomY
			})
			_this.setMask();
			_this.setSmallImg();
		});
	},
	setMask:function(){
		var _this=this;
		var _zX=_this.elem.offset().left,
			_zY=_this.elem.offset().top;
		_this.mask[0].css({
			"position":"absolute",
			"left":_this.mL,
			"top":_this.mT,
			"width":_zX-_this.mL,
			"height":_this.bigH
		})
		_this.mask[1].css({
			"position":"absolute",
			"left":_zX,
			"top":_this.mT,
			"width":_this.rW,
			"height":_zY-_this.mT
		})
		_this.mask[2].css({
			"position":"absolute",
			"left":_zX+_this.rW,
			"top":_this.mT,
			"width":_this.mR-_zX-_this.rW,
			"height":_this.bigH
		})
		_this.mask[3].css({
			"position":"absolute",
			"left":_zX,
			"top":_zY+_this.rH,
			"width":_this.rW,
			"height":_this.mD-_zY-_this.rH
		})
		_this.midImg.css({
			"width":(_this.bigW*_this.midW)/_this.rW,
			"height":(_this.bigH*_this.midH)/_this.rH
		})
		_this.smallImg.css({
			"width":(_this.bigW*_this.smallW)/_this.rW,
			"height":(_this.bigH*_this.smallH)/_this.rH
		})
	},
	refresh:function(){
		var _this=this;
		//图片的四边坐标
		_this.zoomWidth = 120;
		_this.zoomHeight = 120;
		_this.mL = _this.bigImg.offset().left;
		_this.mT = _this.bigImg.offset().top;
		_this.bigW=_this.bigImg.width();
		_this.mR = _this.mL + _this.bigW;
		_this.bigH=_this.bigImg.height();
		_this.mD = _this.mT + _this.bigH;
		var _zoomX = Math.round((_this.bigImg.width() - _this.zoomWidth) / 2 + _this.mL),
			_zoomY = Math.round((_this.bigImg.height() - _this.zoomHeight) / 2 + _this.mT);
		_this.rW=_this.zoomWidth;
		_this.rH=_this.zoomHeight;
		_this.deltaX=_zoomX-_this.mL;
		_this.deltaY=_zoomY-_this.mT;
		_this.elem.css({
			"left":_zoomX,
			"top": _zoomY,
			"width": _this.rW,
			"height": _this.rH,
			"display":"block"

		})
		_this.setMask();
		_this.setSmallImg();
	},
	setSmallImg:function(){
		var _this=this;
		var _mX=_this.deltaX*_this.midW/_this.rW,
			_mY=_this.deltaY*_this.midH/_this.rH,
			_sX=_this.deltaX*_this.smallW/_this.rW,
			_sY=_this.deltaY*_this.smallH/_this.rH;
		_this.midImg.css({
			"left":-_mX,
			"top":-_mY
		})
		_this.smallImg.css({
			"left":-_sX,
			"top":-_sY
		})
	},
	start:function (e, fun) {
		e.stopPropagation();
		e.preventDefault();
		var _this = this,
			_elem = _this.elem;
		_this.fun = fun;
		_this.rW = _elem.width();
		_this.rH = _elem.height();
		_this.eX = parseInt(_elem.offset().left);
		_this.eY = parseInt(_elem.offset().top);
		_this.startX=e.clientX;
		_this.startY=e.clientY;
		//四条边界坐标
		_this.eL = _this.eX; //左边边界
		_this.eR =_this.eX + _this.rW;//右边边界
		_this.eT = _this.eY; //上边边界
		_this.eD = _this.eY + _this.rH;//下边边界
		//top和left定位参数
		_this.fixL = _this.rW + _this.eX;
		_this.fixT = _this.rH + _this.eY;
		_this.fixzoom = true;
		$("body").bind("mousemove", function (e) {
			e.stopPropagation();
			e.preventDefault();
			_this.setResize(e)
			_this.setSmallImg();
		})
		$("body").bind("mouseup", function (e) {
			$(this).unbind("mousemove");
			$(this).unbind("mouseup");
			_this.elem.css("cursor", "move")
			$(this).css("cursor", "")
		})
	},
	setResize:function (e) {
		var _this = this;
		_this.fun(e);
		_this.elem.css({
			"width":_this.rW,
			"height":_this.rH,
			"left":_this.eX,
			"top":_this.eY
		})
		_this.setMask()
		_this.deltaX=Math.round(_this.eX-_this.mL);
		_this.deltaY=Math.round(_this.eY-_this.mT);
	},
	set:function (resize, side) {
		var resize = $(resize), fun;
		var _this = this;
		switch (side) {
			case "up":
				fun = _this.Up;
				break;
			case "down":
				fun = _this.Down;
				break;
			case "left":
				fun = _this.Left;
				break;
			case "right":
				fun = _this.Right;
				break;
			case "leftUp":
				fun = _this.LeftUp;
				break;
			case "leftDown":
				fun = _this.LeftDown
				break;
			case "rightUp":
				fun = _this.RightUp;
				break;
			case "rightDown":
			default:
				fun = _this.RightDown;
		}
		resize.bind("mousedown", function (e) {
			e.stopPropagation();
			e.preventDefault();
			var _cursor = $(this).css("cursor");
			$("body").css("cursor", _cursor);
			_this.elem.css("cursor", _cursor);
			_this.start(e, fun);
		})
	},
	maxX:function (e, side) {
		var _this = this;
		var _eL = _this.elem.offset().left;
		var _eT = _this.elem.offset().top;
		switch(side){
			case "right":
				var _x=e.clientX;
				var _eR=_this.eR+(_x-_this.startX)
				if(_eR>_this.mR){
					_eR=_this.mR;
				}
				var _rW1 = Math.max(_eR -_this.eL, 0);
				var _rW2 = Math.max(_this.mD-_eT, 0);
				_this.rW=Math.floor(Math.min(_rW1,_rW2))
				break;
			case "left":
				var _x=e.clientX;
				var _eX=_this.eL-(_this.startX-_x)
				if(_eX<_this.mL){
					_eX=_this.mL;
				}
				var _rW1 = Math.max(_this.fixL - _eX, 0);
				var _rW2 = Math.max(_this.mD-_eT, 0);
				_this.rW=Math.floor(Math.min(_rW1,_rW2));
				break;
			case "up":
				var _y=e.clientY;
				var _eY=_this.eT-(_this.startY-_y)
				if(_eY<_this.mT){
					_eY=_this.mT;
				}
				var _rH1 = Math.max(_this.fixT - _eY, 0);
				var _rH2 = Math.max(_this.mR-_eL, 0);
				_this.rH=Math.floor(Math.min(_rH1,_rH2));
				break;
			case "down":
				var _y=e.clientY;
				var _eD=_this.eD+(_y-_this.startY)
				if(_eD>_this.mD){
					_eD=_this.mD;
				}
				var _rH1 = Math.max(_eD-_this.eT, 0);
				var _rH2 = Math.max(_this.mR-_eL, 0);
				_this.rH=Math.floor(Math.min(_rH1,_rH2));
				break;
			case "leftup":
				var _x=e.clientX;
				var _eX=_this.eL-(_this.startX-_x)
				if(_eX<_this.mL){
					_eX=_this.mL;
				}
				var _rW1 = Math.max(_this.fixL - _eX, 0);
				_this.rW=_rW1
				var _y=e.clientY;
				var _eY=_this.eT-(_this.startY-_y)
				if(_eY<_this.mT){
					_eY=_this.mT;
				}
				var _rH1 = Math.max(_this.fixT - _eY, 0);
				_this.rH=_rH1
				if (_this.fixzoom) {
					if(_this.rW<120 || _this.rH<120){
						_this.rW=120;
						_this.rH=120;
					}
					_this.rW = _this.rH=Math.floor(Math.min(_this.rW,_this.rH));
				}
				_this.eY = _this.fixT - _this.rH;
				_this.eX = _this.fixL - _this.rW;
				break;
			case "leftdown":
				var _x=e.clientX;
				var _eX=_this.eL-(_this.startX-_x)
				if(_eX<_this.mL){
					_eX=_this.mL;
				}
				var _rW1 = Math.max(_this.fixL - _eX, 0);
				_this.rW=_rW1
				var _y=e.clientY;
				var _eD=_this.eD+(_y-_this.startY)
				if(_eD>_this.mD){
					_eD=_this.mD;
				}
				var _rH1 = Math.max(_eD-_this.eT, 0);
				_this.rH=_rH1
				if (_this.fixzoom) {
					if(_this.rW<120 || _this.rH<120){
						_this.rW=120;
						_this.rH=120;
					}
					_this.rW = _this.rH=Math.floor(Math.min(_this.rW,_this.rH));
				}
				//_this.eY = _this.fixT - _this.rH;
				_this.eX = _this.fixL - _this.rW;
				break;
		}
		if(_this.rW<120 || _this.rH<120){
			_this.rW=120;
			_this.rH=120;
		}

	},
	Up:function (e) {
		var _this = this;
		_this.maxX(e,"up");
		if (_this.fixzoom) {
			_this.rW = _this.rH;
		}
		_this.eY = _this.fixT - _this.rH;
	},
	Down:function (e) {
		var _this = this;
		_this.maxX(e,"down");
		if (_this.fixzoom) {
			_this.rW = _this.rH;
		}
	},
	Left:function (e) {
		var _this = this;
		_this.maxX(e,"left");
		if (_this.fixzoom) {
			_this.rH = _this.rW;
		}
		_this.eX = _this.fixL - _this.rW;
	},
	Right:function (e) {
		var _this = this;
		_this.maxX(e, "right");
		if (_this.fixzoom) {
			_this.rH = _this.rW;
		}
	},
	RightDown:function (e) {
		var _this = this;
		_this.Right(e);
		_this.Down(e);
	},
	LeftUp:function (e) {
		var _this = this;
		_this.maxX(e,"leftup");
		//_this.eY=
	},
	LeftDown:function (e) {
		var _this = this;
		_this.maxX(e,"leftdown");
	},
	RightUp:function (e) {
		var _this = this;
		_this.Right(e);
		_this.Up(e);

	},
	point:function(){
		var _this=this;
		return {"pointX":_this.deltaX,"pointY":_this.deltaY,"zoomWidth":_this.rW};
	}
}